<template>
  <div id="environment-page" class="common-page">
    <el-card class="left-card tree-wrap">
      <div class="tree-search">
        <el-input v-model="filterText" placeholder="请输入关键字" style="margin-right:20px;"/>
        <el-button size="small" color="#626aef" type="primary">查询</el-button>
      </div>
      <el-tree 
        ref="fightTreeRef" 
        :data="treeData" 
        :props="treeProps" 
        :filter-node-method="filterNode"
        @node-click="handleNodeClick" />
    </el-card>
    <el-card class="right-card">
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs,onMounted,onUnmounted,watch } from 'vue';
interface Tree {
  label: string
  children?: Tree[]
}
const filterText = ref('')
const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const treeData: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const treeProps = {
  children: 'children',
  label: 'label',
}
const fightTreeRef = ref(null)
watch(filterText, (val) => {
  fightTreeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}
</script>
<style lang="scss" scoped>
#environment-page{
  display: flex;
  .tree-wrap{
    width: 300px;
    border-radius: 5px;
    height: 100%;
    margin-right:20px;
    .tree-search{
      display: flex;
      align-items: center;
    }
  }
  .right-card{
    flex: 1;
  }
}
</style>